<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <title>电影商城</title>
    <link href="./themes/ecmoban_dangdang/style.css" rel="stylesheet" type="text/css" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        ol {
            list-style: none;
        }
        
        body {
            font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        }
        
        .tab-head {
            margin-left: 120px;
            margin-bottom: 10px;
        }
        
        .tab-content {
            clear: left;
            display: none;
        }
        
        h2 {
            border-bottom: solid #02aaf1 2px;
            width: 200px;
            height: 25px;
            margin: 0;
            float: left;
            text-align: center;
            font-size: 16px;
        }
        
        .selected {
            color: #FFFFFF;
            background-color: #02aaf1;
        }
        
        .show {
            clear: left;
            display: block;
        }
        
        .hidden {
            display: none;
        }
        
        .new-btn-login-sp {
            padding: 1px;
            display: inline-block;
            width: 75%;
        }
        
        .new-btn-login {
            background-color: #02aaf1;
            color: #FFFFFF;
            font-weight: bold;
            border: none;
            width: 100%;
            height: 30px;
            border-radius: 5px;
            font-size: 16px;
        }
        
        #main {
            width: 100%;
            margin: 0 auto;
            font-size: 14px;
        }
        
        .red-star {
            color: #f00;
            width: 10px;
            display: inline-block;
        }
        
        .null-star {
            color: #fff;
        }
        
        .content {
            margin-top: 5px;
        }
        
        .content dt {
            width: 100px;
            display: inline-block;
            float: left;
            margin-left: 20px;
            color: #666;
            font-size: 13px;
            margin-top: 8px;
        }
        
        .content dd {
            margin-left: 120px;
            margin-bottom: 5px;
        }
        
        .content dd input {
            width: 85%;
            height: 28px;
            border: 0;
            -webkit-border-radius: 0;
            -webkit-appearance: none;
        }
        
        #foot {
            margin-top: 10px;
            position: absolute;
            bottom: 15px;
            width: 100%;
        }
        
        .foot-ul {
            width: 100%;
        }
        
        .foot-ul li {
            width: 100%;
            text-align: center;
            color: #666;
        }
        
        .note-help {
            color: #999999;
            font-size: 12px;
            line-height: 130%;
            margin-top: 5px;
            width: 100%;
            display: block;
        }
        
        #btn-dd {
            margin: 20px;
            text-align: center;
        }
        
        .foot-ul {
            width: 100%;
        }
        
        .one_line {
            display: block;
            height: 1px;
            border: 0;
            border-top: 1px solid #eeeeee;
            width: 100%;
            margin-left: 20px;
        }
        
        .am-header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: box;
            width: 100%;
            position: relative;
            padding: 7px 0;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            background: #1D222D;
            height: 50px;
            text-align: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            box-pack: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            box-align: center;
        }
        
        .am-header h1 {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            box-flex: 1;
            line-height: 18px;
            text-align: center;
            font-size: 18px;
            font-weight: 300;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="top_nav">
            <div class="block">
                <ul class="top_bav_l">
                </ul>
                <div class="header_r">
                    <font id="ECS_MEMBERZONE" v-if="islogin"> 欢迎光临电影商城！ <s></s>&nbsp; <span> <a style="color: #FF6766;"
                        href="login.html">[观众登录]</a> <a style="color: #FF6766;" href="register.html">[观众注册]</a>
						<a style="color: #FF6766;" href="slogin.html">[影院登录]</a>
						<a style="color: #FF6766;" href="sregister.html">[影院注册]</a>
                </span>
                    </font>
                    <font id="ECS_MEMBERZONE" v-if="!islogin"> 欢迎电影推荐系统 <b>{{ realname }}</b> <span><a
                        style="color: #FF6766;" href="cart.html">[购物车]</a><a style="color: #FF6766;" href="usercenter.html">[观众中心]</a> <a
                        style="color: #FF6766;" href="exit.html">[退出系统] </a> </span>
                    </font>
                </div>
            </div>
        </div>
        <div class="clearfix">
            <div class="block header">
                <div class="top">
                    <a href="index.html" class="logo"><img src="themes/ecmoban_dangdang/images/logo.gif" /></a>
                    <div class="head_r">
                        <div class="top_shopCart clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
        <div style="clear: both"></div>
        <div class="menu_box clearfix">
            <div class="block">
                <div class="menu">
                    <a href="index.html" class="cur" rel="nofollow">网站首页</a>
                    <a href="article.html" class="cur" rel="nofollow">电影商城公告</a>
                    <a href="recommend.html" class="cur" rel="nofollow">智能推荐电影</a>
                    <a href="all.html" class="cur" rel="nofollow">全部电影</a>
                </div>
            </div>
        </div>
        <div class="blank"></div>
        <div class="block box">
            <div class="blank"></div>
            <div id="ur_here">
                当前位置: <a href="index.html">首页</a>
                <code> &gt; </code> 付款
            </div>
        </div>
        <div class="blank"></div>
        <div class="block table">
            <header class="am-header">
                <h1>支付宝电脑网站支付体验入口页</h1>
            </header>
            <hr class="one_line">
            <div id="main">
                <div id="tabhead" class="tab-head">
                    <h2 id="tab1" class="selected" name="tab">付 款</h2>
                </div>
                <div id="body1" class="show" name="divcontent">
                    <dl class="content">
                        <dt>影院订单号 ：</dt>
                        <dd>
                            <input id="WIDout_trade_no" name="WIDout_trade_no" />
                        </dd>
                        <dt>订单名称 ：</dt>
                        <dd>
                            <input id="WIDsubject" name="WIDsubject" v-model="orders.ordercode" />
                        </dd>
                        <dt>付款金额 ：</dt>
                        <dd>
                            <input id="WIDtotal_amount" name="WIDtotal_amount" v-model="orders.total" />
                        </dd>
                        <dt></dt>
                        <dd id="btn-dd">
                            <span class="new-btn-login-sp">
								<button class="new-btn-login" style="text-align: center;" @click.prevent="toPay()">付 款</button>
							</span> <span class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</span>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="blank"></div>
        <div id="footer">
            <div class="footer">
                <div class="footer_nav_box">
                    <div class="footer_copyright">
                        <span> &copy;  电影商城 版权所有，并保留所有权利。<br /> <br />服务时间：09:00-23:00<br /> <br /> <a href="../admin/index.html"
                            target="_blank">管理员入口</a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!--此页面业务相关的脚本-->
<script type="text/javascript" src="../admin/assets/layui/layui.js"></script>
<script type="text/javascript" src="../admin/assets/js/axios.min.js"></script>
<script type="text/javascript" src="../admin/assets/js/vue.js"></script>
<script type="text/javascript" src="../admin/assets/js/jquery.min.js"></script>
<script type="text/javascript">
    const vue = new Vue({ // 实例化Vue对象
        el: '#app', // 绑定作用域
        data: { //定义数据 用于vue的双向绑定
            username: '', // 观众名
            password: '', // 密码
            islogin: '',
            userid: '',
            realname: '',
            ordersid: '',
            orders: {},
        },
        methods: {
            getUrlParam: function() {
                var name, value;
                var str = location.href; // 取得整个地址栏
                var num = str.indexOf("?"); // 定位参数起始位置
                str = str.substr(num + 1); // 取得所有参数 
                var arr = str.split("&"); // 各个参数放到数组里
                for (var i = 0; i < arr.length; i++) {
                    num = arr[i].indexOf("=");
                    if (num > 0) {
                        name = arr[i].substring(0, num);
                        value = arr[i].substr(num + 1);
                        this.ordersid = value; // 确认主键参数
                    }
                }
            },
            loadPage: function() {
                let _this = this;
                _this.userid = sessionStorage.getItem('userid');
                _this.islogin = sessionStorage.getItem('userid') == null;
                _this.realname = sessionStorage.getItem('realname');
                axios.get('http://localhost:8080/vue_gxhfztjxt/index/prePay.action?id=' + _this.ordersid).then(result => {
                    _this.orders = result.data.orders;
                });
            },
            toPay: function() {
                let _this = this;
                axios.get('http://localhost:8080/vue_gxhfztjxt/index/pay.action?id=' + _this.ordersid).then(result => {
                    if (result.data.code > 0) {
                        window.location.href = "orderslist.html";
                    } else {
                        alert('修改失败');
                    }
                });
            },
        },
        created() { // 生命周期相关的函数
            this.getUrlParam();
            this.loadPage();
        },
    });

    function GetDateNow() {
        var vNow = new Date();
        var sNow = "";
        sNow += String(vNow.getFullYear());
        sNow += String(vNow.getMonth() + 1);
        sNow += String(vNow.getDate());
        sNow += String(vNow.getHours());
        sNow += String(vNow.getMinutes());
        sNow += String(vNow.getSeconds());
        sNow += String(vNow.getMilliseconds());
        document.getElementById("WIDout_trade_no").value = sNow;
    }
    GetDateNow();
</script>

</html>